<template>
  <div>
    <div class="content">
      <div class="welcome">
        <div class="text">
          大学生创业平台
        </div>
      </div>
      <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          text-color="#000000"
          :active-text-color="color"
          background-color="#AED6F1"
          mode="horizontal"
          :router="true"
          @select="handleSelect"
      >
        <el-menu-item index="welcome">首页</el-menu-item>
        <el-menu-item index="forum">论坛</el-menu-item>
        <el-menu-item index="Information">公告信息</el-menu-item>
        <el-menu-item index="visualization" v-if="userData.occupation===2">可视化</el-menu-item>
        <el-menu-item index="index/dashboard">后台管理</el-menu-item>
      </el-menu>
    </div>
    <router-view></router-view>
  </div>

</template>
<script setup>
import {ref} from 'vue'
const activeIndex = ref('2')
const color = ref('')
import {useUserStore} from "@/pinia/stores/user";
const userStore = useUserStore()
const userData = userStore.userInfo
const handleSelect = (key, keyPath) => {
  color.value = 'white'
}

</script>

<style scoped>
.el-menu-item {
  font-size: 20px;
  margin-left: 20px;
}
.el-menu-demo{
  height: 40px;
}
.welcome {
  left: 52px;
  top: 56px;
  width: 256px;
  height: 40px;
  border-radius: 10px;
  opacity: 1;
  background-color: #98F5FF;
  box-shadow: 5px 5px 10px 0 #AEEEEE;
  text-align: center;
  font-size: 20px;
  margin-left: 10px;
}
.text{
  padding: 8px;
}

.content {
  height: 80px;
  background-color: #BBFFFF;
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
